import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    // 任务列表
    taskList: []
}
const getters = {
    // 选中的数量
    checkedNum(state){
        return state.taskList.reduce((num, item) => {
           if (item.isChecked) num++
           return num
        },0)
    },
    // 所有的数量
    allNum(state){
        return state.taskList.length;
    },
    isAllChecked(state,{checkedNum,allNum}){
        if (checkedNum ===0 || allNum ===0){
            return false
        }
        return checkedNum === allNum

    }
}
const mutations = {
    ADD_TASK_LIST(state, event) {
        const title = event.target.value.trim();
        if (!title) {
            alert("请输入任务标题");
            return;
        }
        // 判断数组中的任务是否拥有相同的标题
        if (state.taskList.some(v => v.title === title)) {
            alert("任务的标题不允许重复！");
            return;
        }
        state.taskList = [
            {
                id: Date.now(),
                title,
                isChecked: false
            },
            ...state.taskList
        ]
        store.dispatch("updateTaskList")
        event.target.value = null;
    },
    DEL_TASK_LIST_BY_ID(state, id) {
        if (window.confirm("您确定要删除该任务吗？")) {
            state.taskList = state.taskList.filter(v => v.id !== id);
        }
        store.dispatch("updateTaskList")
    },
    UP_TASK_LIST_BY_ID(state, id) {
        state.taskList.map(item => {
            if (item.id === id) item.isChecked = !item.isChecked;
            return item;
        })
        store.dispatch("updateTaskList")
    },
    DEL_TASK_LIST_BY_IS_CHECKED(state) {
        if (window.confirm("您确定要删除选中任务吗？")) {
            state.taskList = state.taskList.filter(v => !v.isChecked)
        }
        store.dispatch("updateTaskList")
    },
    CHANGE_ALL_CHECKED(state){
        state.taskList.map(item => item.isChecked = !item.isChecked)
        store.dispatch("updateTaskList")
    }
}
const actions = {
    // 以下是优化后的代码，确保 actions 只在组件中调用，并通过 actions 调用 mutations 来更新状态
    updateTaskList({state}){
        localStorage.setItem("taskList",JSON.stringify(state.taskList))
    },
    getTaskList({state}){
        state.taskList = localStorage.getItem("taskList") ? JSON.parse(localStorage.getItem("taskList")) : []
    }
}
const modules = {}
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules
})
export default store
